import React from "react";

/*
  其实子组件给父组件传值，本质意义还是在父给子传，只是传递的是一个函数
  我们将父组件的函数传递给子组件，在子组件中调用这个函数，并且可以传递参数
*/

const Header = function(props){
  return (<>
  <div>
    <button onClick={()=>{
      console.log('被点击了',props);

      // 3. 在子组件中触发父组件传递过来函数，且挈带一个参数
      props.fn({
        name: '老吴',
        age: 18
      })
    }}>点击给父组件传递参数</button>
    </div>
  </>)
}

class Content extends React.Component {
  render(){
    return (<>
      <div>
         学习 React 实际上是在学习 JavaScript
         <button onClick={()=>{
            // 类组件给父组件传递内容
            this.props.classFn('辣条')
         }}>点击给父组件传递一包辣条</button>
      </div>
    </>)
  }
}

// 1. 在父组件中定义一个事件
// 2. 将事件传递给子组件
// 3. 在子组件中触发事件且携带参数

export default class App extends React.Component {


  // 1. 父组件中先定义一个接收子组件参数的方法
  getData = (val)=>{
    console.log('父组件中接收：', val);

  }

  render(){
    return (<>
      <div>
        {/* 2. 将定义的函数传递给子组件 */}
        <Header fn={this.getData} name='react' />
        <Content classFn={this.getData} />
      </div>
    </>)
  }
}

